import React, { useState } from 'react'
import './style.less'
import { Button, Flex, Modal } from 'antd'
import { message, usePage } from '@hs-admin/utils'
import { HsAdminTablePage, HsAdminSpin } from '@hs-admin/base-components'
import { exportSuggestion, getSuggestionList } from '@/api/monitor/suggestion'

const OperationIndustryAtlas: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [data, setData] = useState<any[]>([])
  const [rowData, setrowData]: any = useState({})
  const [loading, setloading] = useState(true)

  const columns = [
    {
      title: '提交人',
      dataIndex: 'user.name'
    },
    {
      title: '提交时间',
      dataIndex: 'created_at',
      type: 'datetime'
    },
    {
      title: '反馈类型',
      dataIndex: 'page'
    },
    {
      title: '位置',
      dataIndex: 'feature'
    },
    {
      title: '详情',
      dataIndex: 'suggestion',
      ellipsis: true,
      render: (text: string) => {
        return (
          <div
            className="text-blue cursor-pointer"
            onClick={() => {
              setIsModalOpen(true)
              setrowData(text)
            }}>
            查看
          </div>
        )
      }
    }
  ]

  // 列表查询事件
  const callList = async () => {
    setloading(true)
    const params = {
      page: pagination.current,
      page_size: pagination.pageSize
    }
    const res = await getSuggestionList(params)
    const tableData = res.items ?? []
    setData(tableData)
    setloading(false)
    return res
  }
  const { pagination }: { pagination: UsePageProps } = usePage(callList)

  const callExport = () => {
    exportSuggestion({}).then(() => {
      message.success('导出成功')
    })
  }

  return (
    <div className="operation-industry-atlas-page-wrapper">
      {loading && <HsAdminSpin />}
      <Flex justify="flex-end">
        <Button type="primary" onClick={callExport}>
          导出
        </Button>
      </Flex>
      <HsAdminTablePage columns={columns} rowKey="id" dataSource={data} pagination={pagination} size="small"></HsAdminTablePage>
      <Modal
        title={'详情'}
        open={isModalOpen}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false)
          setrowData({})
        }}
        width={600}>
        <div className="overflow-auto h-500px" dangerouslySetInnerHTML={{ __html: rowData }}></div>
      </Modal>
    </div>
  )
}

export default OperationIndustryAtlas
